{% extends 'base/base.html' %}
{% load static %}

{% block title %}{{ market.name }} - 超市详情 - 妙趣拾光锦盒{% endblock %}

{% block extra_css %}
<style>
    .market-header {
        background-color: #f8f9fa;
        border-radius: 15px;
        overflow: hidden;
        margin-bottom: 30px;
    }
    
    .market-image {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }
    
    .market-info {
        padding: 30px;
    }
    
    .market-address {
        margin-top: 15px;
        color: #6c757d;
    }
    
    .rating-stars {
        color: #ffc107;
        font-size: 1.2rem;
    }
    
    .market-hours {
        background-color: #e9ecef;
        padding: 8px 15px;
        border-radius: 20px;
        display: inline-block;
        margin-top: 10px;
        font-size: 0.9rem;
    }
    
    .section-title {
        margin: 40px 0 20px 0;
        padding-bottom: 10px;
        border-bottom: 2px solid #f0f0f0;
    }
    
    .box-card {
        border-radius: 15px;
        overflow: hidden;
        transition: all 0.3s ease;
        height: 100%;
    }
    
    .box-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    
    .box-image {
        height: 180px;
        object-fit: cover;
    }
    
    .box-discount {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #dc3545;
        color: white;
        font-weight: bold;
        padding: 5px 10px;
        border-radius: 20px;
    }
    
    .similar-market-card {
        padding: 15px;
        border-radius: 10px;
        margin-bottom: 15px;
        transition: all 0.3s ease;
    }
    
    .similar-market-card:hover {
        background-color: #f8f9fa;
    }
    
    .map-container {
        height: 300px;
        border-radius: 15px;
        overflow: hidden;
        margin-top: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-5">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'blindbox:index' %}">首页</a></li>
            <li class="breadcrumb-item"><a href="{% url 'market:list' %}">合作超市</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ market.name }}</li>
        </ol>
    </nav>

    <!-- 超市头部信息 -->
    <div class="market-header shadow-sm">
        <div class="row g-0">
            <div class="col-md-5">
                <img src="{{ market.image_url|default:'/static/images/default-market.jpg' }}" class="market-image" alt="{{ market.name }}">
            </div>
            <div class="col-md-7">
                <div class="market-info">
                    <h1 class="display-5">{{ market.name }}</h1>
                    
                    <div class="rating-stars mb-3">
                        {% for i in '12345'|make_list %}
                            {% if forloop.counter <= market.rating %}
                            <i class="fas fa-star"></i>
                            {% else %}
                            <i class="far fa-star"></i>
                            {% endif %}
                        {% endfor %}
                        <span class="ms-2 text-muted">({{ market.rating }})</span>
                    </div>
                    
                    <p class="market-address">
                        <i class="fas fa-map-marker-alt me-2"></i> {{ market.address|default:"地址未提供" }}
                    </p>
                    
                    <div class="market-hours">
                        <i class="far fa-clock me-2"></i> {{ market.business_hours|default:"营业时间未提供" }}
                    </div>
                    
                    {% if market.phone %}
                    <p class="mt-3">
                        <i class="fas fa-phone-alt me-2"></i> 
                        <a href="tel:{{ market.phone }}" class="text-decoration-none">{{ market.phone }}</a>
                    </p>
                    {% endif %}
                    
                    <div class="mt-4">
                        <a href="#boxes-section" class="btn btn-primary me-2">
                            <i class="fas fa-box-open me-1"></i> 查看盲盒 ({{ box_count }})
                        </a>
                        <a href="{% url 'market:map' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-map-marked-alt me-1"></i> 在地图上查看
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 超市描述 -->
    {% if market.description %}
    <div class="card shadow-sm mb-5">
        <div class="card-header bg-light">
            <h4 class="mb-0"><i class="fas fa-info-circle me-2"></i>超市简介</h4>
        </div>
        <div class="card-body">
            <p class="mb-0">{{ market.description }}</p>
        </div>
    </div>
    {% endif %}

    <!-- 盲盒列表 -->
    <h2 class="section-title" id="boxes-section">
        <i class="fas fa-box-open me-2"></i> 盲盒列表
    </h2>
    
    <div class="row">
        {% for box in boxes %}
        <div class="col-md-3 mb-4">
            <div class="card box-card border-0 shadow-sm">
                <div class="position-relative">
                    <img src="{{ box.image_url|default:'/static/images/default-box.jpg' }}" class="card-img-top box-image" alt="{{ box.name }}">
                    {% if box.discount_percentage > 0 %}
                    <span class="box-discount">{{ box.discount_percentage }}%</span>
                    {% endif %}
                </div>
                <div class="card-body">
                    <h5 class="card-title">{{ box.name }}</h5>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <span class="text-danger fw-bold">¥{{ box.discount_price }}</span>
                            {% if box.has_discount %}
                            <span class="text-muted text-decoration-line-through ms-2">¥{{ box.original_price }}</span>
                            {% endif %}
                        </div>
                        <span class="badge bg-{% if box.stock > 10 %}success{% elif box.stock > 0 %}warning{% else %}danger{% endif %}">
                            {% if box.stock > 0 %}库存: {{ box.stock }}{% else %}已售罄{% endif %}
                        </span>
                    </div>
                    <div class="d-grid">
                        <a href="{% url 'blindbox:detail' box_id=box.box_id %}" class="btn btn-outline-primary">查看详情</a>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <div class="mb-4">
                <i class="fas fa-box-open" style="font-size: 4rem; color: #6c757d;"></i>
            </div>
            <h3>暂无盲盒数据</h3>
            <p class="text-muted">该超市目前没有提供任何盲盒</p>
        </div>
        {% endfor %}
    </div>
    
    {% if boxes %}
    <div class="text-center mt-3 mb-5">
        <a href="{% url 'blindbox:list' %}?market_id={{ market.market_id }}" class="btn btn-primary">
            查看全部盲盒 <i class="fas fa-arrow-right ms-1"></i>
        </a>
    </div>
    {% endif %}
    
    <!-- 类似超市 -->
    {% if similar_markets %}
    <div class="row mt-5">
        <div class="col-md-8">
            <!-- 地图位置 -->
            {% if market.latitude and market.longitude %}
            <h2 class="section-title">
                <i class="fas fa-map-marker-alt me-2"></i> 超市位置
            </h2>
            <div id="marketMap" class="map-container"></div>
            {% endif %}
        </div>
        
        <div class="col-md-4">
            <h2 class="section-title">
                <i class="fas fa-store-alt me-2"></i> 更多超市推荐
            </h2>
            
            {% for sm in similar_markets %}
            <a href="{% url 'market:detail' market_id=sm.market_id %}" class="text-decoration-none">
                <div class="similar-market-card shadow-sm">
                    <div class="d-flex align-items-center">
                        <img src="{{ sm.image_url|default:'/static/images/default-market.jpg' }}" alt="{{ sm.name }}" class="rounded-circle me-3" style="width: 50px; height: 50px; object-fit: cover;">
                        <div>
                            <h5 class="mb-0">{{ sm.name }}</h5>
                            <div class="text-warning small">
                                {% for i in '12345'|make_list %}
                                    {% if forloop.counter <= sm.rating %}
                                    <i class="fas fa-star"></i>
                                    {% else %}
                                    <i class="far fa-star"></i>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
{% if market.latitude and market.longitude %}
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=b7fb3f07380c4c27224ed3136b63dc04"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化高德地图
        var map = new AMap.Map('marketMap', {
            zoom: 15,  // 缩放级别
            center: [{{ market.longitude }}, {{ market.latitude }}]  // 中心点坐标，注意高德地图的坐标顺序是经度在前，纬度在后
        });
        
        // 添加标记点
        var marker = new AMap.Marker({
            position: [{{ market.longitude }}, {{ market.latitude }}],
            title: '{{ market.name }}',
            icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'
        });
        
        // 将标记点添加到地图
        map.add(marker);
        
        // 添加缩放控制和比例尺
        map.plugin(['AMap.ToolBar', 'AMap.Scale'], function(){
            map.addControl(new AMap.ToolBar());
            map.addControl(new AMap.Scale());
        });
        
        // 创建信息窗体
        var infoWindow = new AMap.InfoWindow({
            content: '<div class="p-2">' + 
                '<h5 class="mb-1">{{ market.name }}</h5>' + 
                '<p class="mb-1"><i class="fas fa-map-marker-alt text-danger me-1"></i> {{ market.address }}</p>' + 
                '{% if market.business_hours %}' + 
                '<p class="mb-1"><i class="far fa-clock text-primary me-1"></i> {{ market.business_hours }}</p>' + 
                '{% endif %}' + 
                '{% if market.phone %}' + 
                '<p class="mb-0"><i class="fas fa-phone-alt text-success me-1"></i> {{ market.phone }}</p>' + 
                '{% endif %}' + 
                '</div>',
            anchor: 'bottom-center',
            offset: new AMap.Pixel(0, -30)
        });
        
        // 在标记点上添加点击事件打开信息窗体
        marker.on('click', function() {
            infoWindow.open(map, marker.getPosition());
        });
        
        // 默认打开信息窗体
        infoWindow.open(map, marker.getPosition());
    });
</script>
{% endif %}
{% endblock %} 